<!doctype html>
<html class="no-js fixed-layout">
<head>
  <!-- 公共head Begin -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="keywords" content="萌宠之家-C2B2C社会化电商平台" />
  <meta name="description" content="《萌宠之家-C2B2C社会化电商平台》是一个基于宠物社区的一站式电商平台。" />
  <!-- minimum-scale=1.0, maximum-scale=1.0 不加这两个在iPhone浏览器下点击缩小了的输入框会使整个页面变大 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
  <title>萌宠之家-C2B2C社会化电商平台</title>

  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">

  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>

  <link rel="icon" type="image/png" href="statics/img/favicon.png">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="statics/img/app-icon72x72@2x.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Pet Mall"/>
  <link rel="apple-touch-icon-precomposed" href="statics/img/app-icon72x72@2x.png">

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="statics/img/app-icon72x72@2x.png">
  <meta name="msapplication-TileColor" content="#0e90d2">

  <link rel="stylesheet" href="statics/AmazeUI/assets/css/amazeui.min.css">
  <link rel="stylesheet" href="statics/AmazeUI/assets/css/shop.css">

  <!--[if (gte IE 9)|!(IE)]><!-->
  <script src="statics/AmazeUI/assets/js/jquery.min.js"></script>
  <!--<![endif]-->

  <script src="statics/js/plugin/jquery.cookie.js"></script>

  <!-- 此处form的导入和amazeui.min.js会有冲突，请根据需要使用 -->
  <script src="statics/js/plugin/jquery.form.js"></script>

  <script src="statics/js/jquery.lSelect.js"></script>
  <script src="statics/js/plugin/jquery.metadata.js"></script>
  <script src="statics/js/product.js"></script>
  <!-- 公共head End -->
</head>
<body>
<!-- 网页头部 Begin -->
<div class="header"></div>
<!-- 网页头部 End -->
<div class="am-cf shop-main">
  <!-- content start -->
  <div class="shop-content">
    <div class="shop-content-body">
      <div class="am-margin am-text-default">
        <div class="am-panel am-panel-default">
          <div class="am-panel-bd">
            <p>
              尊敬的&nbsp;<strong id="lblUsername" class="am-text-success">-</strong>，
              您选择的支付方式为：支付宝&emsp;
              <a id="aOrderId" class="am-badge am-badge-primary" href="javascript:void(0);">查看订单详情</a>
            </p>
            <p>
              支付总金额：<strong id="lblPayment" class="am-text-danger">-</strong>
            </p>
            <p>
              <img id="imgPay" style="display: none;" class="am-thumbnail am-radius am-margin-bottom-0" src="" />
              <span id="lblTips" style="display: none;" class="am-text-warning">请打开【支付宝】，扫描上方二维码，进行支付！</span>
            </p>
            <p>
              <button id="btnPay" type="button" style="display: none;" class="am-btn am-btn-success am-btn-xs">确认支付</button>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- content end -->
</div>
</body>
<script src="statics/AmazeUI/assets/js/amazeui.min.js"></script>
<script src="statics/AmazeUI/assets/js/amazeui.modal.js"></script>
<script src="statics/js/base.js"></script>
<script src="statics/AmazeUI/assets/js/validator.js"></script>
<script type="text/javascript">

    let jsonUser;
    let token;

    // 订单id
    let orderId = GetQueryString('id');

    $().ready( function() {

        // 判断用户信息和token是否存在
        jsonUser = sessionStorage.getItem("user");
        token = sessionStorage.getItem("token");

        // 加载公共顶部模板
        $('.header').load('header.html');

        // 查看是否存在订单id
        if( orderId ) {
            // 如果存在订单id，就加载订单信息
            loadOrderInfo();

            // 填充用户名
            let user = JSON.parse(jsonUser);
            $('#lblUsername').html(user.username);

            // 显示支付按钮
            $('#btnPay').show();
        }

        // ‘支付按钮’点击事件
        $('#btnPay').click(function () {

            // 锁定‘支付’按钮，避免重复提交
            $(this).attr('disabled', true);

            // 调用'支付'接口
            $.ajax({
                type: 'POST',
                url: 'http://localhost:8080/pay/add',
                async: false,
                data: {
                    token: token,
                    orderId: orderId
                },
                success: function (result) {

                    // 激活‘支付’按钮
                    $('#btnPay').attr('disabled', false);

                    // 如果返回的数据的响应码不是'成功(200)'
                    if (result.code != 200) {
                        Modal.alert(result.msg);
                        return;
                    }

                    // 如果返回的数据响应码为200
                    // 就设置支付二维码图片
                    $('#imgPay').attr('src', IMAGE_URL_CONST.ALIPAY_QR + result.data);
                    $('#imgPay').show();

                    // 显示支付提示信息
                    $('#lblTips').show();

                }// success: function (result);

            });// $.ajax();

        });// $('#btnPay').click();

    });// $().ready();

    /** 根据订单id，查找订单信息 **/
    function loadOrderInfo(){

        // 加载'商品信息'数据
        $.ajax({
            type: 'POST',
            url: 'http://localhost:8080/order/get',
            async: false,
            data: {
                token: token,
                id:orderId
            },
            success: function (result) {

                // 如果返回的数据的响应码不是'成功(200)'
                if (result.code != 200) {
                    Modal.alert(result.msg);
                    return;
                }

                // 如果返回的数据响应码为200
                // 填充订单信息数据
                fillOrderInfo(result.data);
            }

        });// $.ajax();

    }// loadOrderInfo();

    /** 填充订单信息 **/
    function fillOrderInfo( order ) {

        // 订单总金额
        $('#lblPayment').html( priceUnitCurrencyFormat(order.payment) );

        // '查看订单详情'按钮
        $('#aOrderId').attr('href', 'member_order_view.html?id=' + orderId);

    }// fillOrderInfo( order );

/**
 * 检查订单支付状态
 *
 * (每5秒执行1次)
 */
var jobPayStatusCheck = setInterval(function () {

    // 当前用户token
    let token = sessionStorage.getItem("token");

    // 判断当前用户是否登录(token是否存在)
    if( !token ) {
        return;
    }// if( !token );

    $.ajax({
        type: 'POST',
        url: 'http://localhost:8080/order/getStatus',
        dataType: "json",
        data: {
            token: token,
            id: orderId
        },
        success: function( result ) {

            // 如果返回的数据的响应码是'成功(200)'
            // 并且‘订单状态’为‘已付款’
            if (result.code == 200 && result.data == ORDER_STATUS_CONST.PAID ) {

                // 清除定时器
                clearInterval(jobPayStatusCheck);

                Modal.confirm('您的订单支付成功！', {
                    closeViaDimmer: false,
                    onConfirm: function() {
                        top.location.href = 'member_receiver_order_list.html';
                    },
                    onCancel: function() {
                        top.location.href = 'member_receiver_order_list.html';
                    }
                });// Modal.confirm();

                return;

            }// if (result.code == 200 && result.data == ORDER_STATUS_CONST.PAID );

        }// success: function( result );
    });

}, 5000);// jobPayStatusCheck();

</script>
</html>